<template>
	<view class="gift-package" v-if="!loadding">
		<view class="p20">
			<view class="f30 gray6 mb20">{{$t('plus.delivery_address')}}</view>
			<Myinfo :Address="Address" :existAddress="existAddress"></Myinfo>
		</view>
		<view class="p20">
			<view class="f30 gray6 mb20">{{$t('plus.winning_product')}}</view>
			<view class="gift-package-main">
				<view class="cuopon-group">
					<view class="body">
						<view class="item bg-white">
							<view class="d-s-c">
								<view>
									<image class="product_img" :src="detail.recordImage" mode="aspectFill"></image>
								</view>
								<view class="pro">
									<view class="pro_t">{{ detail.recordName }}</view>
									<view class="f26 gray3">HK$<text class="f32">{{ detail.productPrice }}</text></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="btns d-e-c">
			<button @click="onPay()" class="mr20" v-if="detail.address == ''">{{$t('plus.confirm_exchange')}}</button>
			<button class="mr20" v-if="detail.address != ''">{{$t('plus.pending_delivery')}}</button>
		</view>
	</view>
</template>

<script>
	import Myinfo from '@/pages/order/confirm-order/my-info.vue';
	import utils from '@/common/utils.js';
	export default {
		components: {
			Myinfo
		},
		data() {
			return {
				record_id: 0,
				/*是否加载完成*/
				loadding: true,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				id: 0,
				tab_type: 0,
				/*礼包详情*/
				detail: {
					name: '',
					point: '',
					money: '',
					coupon_list: []
				},
				storeId: 0,
				// 是否存在收货地址
				existAddress: false,
				/*默认地址*/
				Address: null,
			};
		},
		onLoad(e) {
			let self = this;
			let scene = utils.getSceneData(e);
			self.$fire.on('selectStoreId', function(storeId) {
				self.storeId = storeId;
			});
			/*商品id*/
			this.recordId = e.recordId;
			this.code = e.code;
		},
		onShow() {
			this.getData();
			uni.setNavigationBarTitle({
			title: this.$t('order.prize_redemption')
		})
		},
		methods: {
			onPay() {
				let self = this;
				if (self.Address == null) {
					self.showError(this.$t('plus.select_address'));
					return;
				}
				uni.showLoading({
					title: this.$t('plus.loading')
				});

				let params = {
					recordId: self.recordId
				};
				self._postBody('plus/lottery/order/buy', params, function(res) {
					self.showSuccess(self.$t('plus.claim_success'), function(res) {
						uni.navigateBack();
					});
				});
			},

			/*获取数据*/
			getData() {
				let self = this;
				uni.showLoading({
					title: this.$t('plus.loading')
				});
				self.loadding = true;
				let params = {
					recordId: self.recordId,
					deliveryType: self.delivery
				};
				if (self.delivery == 20) {
					params.storeId = self.storeId;
				}
				self._postBody(
					'plus/lottery/order/toBuy',
					params,
					function(res) {
						self.detail = res.data.record;
						self.existAddress = res.data.orderData.existAddress;
						self.Address = res.data.orderData.address;

						uni.hideLoading();
						self.loadding = false;
					},
					function(res) {
						uni.navigateBack({
							delta: 1
						});
					}
				);
			},

			hasType(e) {
				if (this.deliverySetting.indexOf(e) != -1) {
					return true;
				} else {
					return false;
				}
			},

			/*选择配送方式*/
			tabFunc(e) {
				this.tab_type = e;
				if (e == 0) {
					this.delivery = 10;
				} else {
					this.delivery = 20;
				}
				this.getData();
			},
			choosePaytype(payType) {
				this.payType = payType;
			},
			/*关闭弹窗*/
			closePopup(e, params) {
				this.isPopup = false;
				console.log(params);
				if (e && e.specAttr) {
					this.detail['specName'] = '';
					let has = this.$t('plus.selected');
					let noone = '';
					e.specAttr.forEach(item => {
						if (item.specItems) {
							let h = '';
							for (let i = 0; i < item.specItems.length; i++) {
								let child = item.specItems[i];
								if (child.checked) {
									h = child.specValue + ' / ';
									break;
								}
							}
							if (h != '') {
								has += h;
							} else {
								noone += item.groupName;
							}
						}
					});
					this.productSkuId = params.productSkuId;
					if (noone != '') {
						this.detail.specName = noone;
					} else {
						has = has.replace(/(\s\/\s)$/gi, '');
						this.detail.specName = has;
					}
					console.log(this.detail.specName);
				}
			},
			/* 打开弹窗 */
			openPopup(e, spe, detail) {
				let obj = {
					specData: spe,
					detail: detail,
					productSpecArr: spe != null ? new Array(spe.specAttr.length) : [],
					showSku: {
						skuImage: '',
						seckillPrice: 0,
						productSkuId: 0,
						linePrice: 0,
						seckillStock: 0,
						seckillProductSkuId: 0,
						sum: 1
					},
					type: e
				};
				this.productModel = obj;
				this.isPopup = true;
			}
		}
	};
</script>

<style>
	page {
		background-color: #f2f2f2;
	}

	/*top-tab*/
	.top-tabbar {
		height: 90rpx;
		line-height: 86rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #ffffff;
		border-bottom: 1px solid #dddddd;
	}

	.tab-item {
		flex: 1;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #666666;
	}

	/*  */
	.gift-package {
		position: relative;
		min-height: 100vh;
		padding-bottom: 100rpx;
	}

	.gift-package .gift-package-main {
		background: #ffffff;
		padding: 25rpx 20rpx;
		border-radius: 0;
		box-sizing: border-box;
	}

	.order_tit {
		padding-left: 30rpx;
		font-size: 28rpx;
		margin-bottom: 73rpx;
	}

	.gift-package-main .giftpackagr-info {
		margin: 0 auto;
		width: 350rpx;
		height: 43rpx;
		line-height: 43rpx;
		border: 1rpx solid #fa212c;
		margin-top: 18rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 30rpx;
		text-align: center;
	}

	.gift-package-main .giftpackagr-info .detatime {
		/* padding:10px 30px; */
		font-size: 18rpx;
		color: #fa1f29;
		font-weight: 800;
	}

	.cuopon-group {
		color: #ffffff;
		text-align: center;
		font-size: 30rpx;
		background-color: #ffffff30;
		border-radius: 15rpx;
	}

	.cuopon-title {
		color: #919191;
		font-size: 35rpx;
		margin-bottom: 20rpx;
	}

	.cuopon-group .title {
		font-size: 24rpx;
		color: #cacaca;
		text-align: left;
	}

	.cuopon-group .body {}

	.cuopon_item {
		position: relative;
	}

	.item_cuopon {
		z-index: 50;
	}

	.cuopon-group .body .item {
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		position: relative;
	}

	.cuopon_img {
		width: 493rpx;
		height: 123rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.cuopon-group .body .item .price {
		z-index: 50;
		font-size: 18rpx;
		margin-left: 26rpx;
	}

	.cuopon-group .body .item .des {
		z-index: 50;
		padding: 26rpx 0;
		font-size: 24rpx;
		text-align: left;
		margin-left: 50rpx;
	}

	.item .des .des_t {
		font-size: 26rpx;
		color: #000000;
		margin-bottom: 12rpx;
	}

	.item .des .des_c {
		font-size: 18rpx;
		color: #6b6b6b;
		margin-bottom: 8rpx;
	}

	.item .des .des_b {
		font-size: 18rpx;
		color: #6b6b6b;
	}

	.t-c {
		text-align: center;
	}

	.gift-package-main .integral {
		background-color: #ffffff66;
		padding-bottom: 60rpx;
		border-radius: 15rpx;
	}

	.gift-package-main .integral .title {
		font-size: 24rpx;
		color: #cacaca;
		text-align: left;
	}

	.gift-package-main .integral_btom {
		border: 1rpx solid #cacaca;
		height: 193rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
		border-radius: 15rpx;
	}

	.gift-package-main .integral .info {
		margin-left: 30rpx;
		width: 300rpx;
		color: #f0510e;
	}

	.gift-package-main .integral image {
		width: 135rpx;
		height: 135rpx;
		margin-left: 40rpx;
	}

	.gift-package-main .integral .num {
		font-size: 50rpx;
	}

	.btns {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		position: fixed;
		bottom: 0;
		background-color: #ffffff;
		border-top: 1rpx solid #eeeeee;
		z-index: 99;
	}

	.order_price {
		text-align: right;
		color: #fd0000;
		font-size: 30rpx;
		margin-left: 30rpx;
	}

	.btns button {
		width: 196rpx;
		height: 62rpx;
		background: linear-gradient(0deg, #FB3A26, #FE9071);
		color: #ffffff;
		text-align: center;
		line-height: 62rpx;
		border-radius: 35rpx;
	}

	.rule {
		overflow: hidden;
		position: absolute;
		right: 0;
		top: 480rpx;
		z-index: 100;
	}

	.rule_btn {
		margin-top: 27rpx;
		width: 183rpx;
		height: 62rpx;
		line-height: 62rpx;
		text-align: center;
		background-color: #e83514;
		border: 1rpx solid #ffffff;
		border-top-left-radius: 32rpx;
		border-bottom-left-radius: 32rpx;
		color: #ffffff;
		font-size: 26rpx;
	}

	.add {
		font-size: 73rpx;
		font-weight: 900;
		text-align: center;
		color: #ffffff;
	}

	.cuopon_num {
		display: inline-block;
		width: 40rpx;
		height: 40rpx;
		border: 1rpx solid #939393;
		margin-left: 150rpx;
		text-align: center;
		line-height: 40rpx;
		font-size: 18rpx;
		border-radius: 10rpx;
		position: absolute;
		top: 40px;
		right: 15px;
		color: #000000;
	}

	.product_img {
		width: 146rpx;
		height: 146rpx;
		border-radius: 15rpx;
	}

	.pro {
		margin-left: 12rpx;
		text-align: left;
		flex: 1;
		min-height: 146rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
	}

	.pro_t {
		font-size: 26rpx;
		color: #333;
		margin-bottom: 15rpx;
	}

	.pro_c {
		font-size: 20rpx;
		color: #686868;
	}

	.pro_b {
		font-size: 28rpx;
		color: #fd0000;
	}

	.f18 {
		font-size: 18rpx;
	}

	.pro_choose {
		width: 33rpx;
		height: 33rpx;
		position: absolute;
		right: 10rpx;
		top: 6rpx;
	}

	.borbox {
		border: 1rpx solid #cacaca;
	}

	.type_activ {
		width: 40rpx;
		height: 40rpx;
		background-color: #04be01;
		border-radius: 50%;
		overflow: hidden;
		text-align: center;
		line-height: 1;
	}

	.icon-tijiaochenggong {
		color: #ffffff;
		font-size: 22rpx;
	}

	.speci {
		font-size: 24rpx;
		width: 100rpx;
		height: 44rpx;
		color: #ffffff;
		text-align: center;
		border-radius: 22rpx;
		background-color: #fd0000;
		line-height: 44rpx;
	}

	.pro_not {
		width: 33rpx;
		height: 33rpx;
		position: absolute;
		right: 10rpx;
		top: 6rpx;
		border: 1rpx solid #cacaca;
		border-radius: 50%;
	}
</style>